@charset "UTF-8";
/**
 * 
 * @authors 3pixel (kermit@piexl.net)
 * @date    2017-11-30 12:01:00
 * @version v0.0.1
 */
//引入变量
@import "variable.less";

//引入混合函数
@import "mixins.less";

// 航线信息
.route-info{
	max-width:1366px;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:90px;
	.route-map{
		width:682/1366*100%;
	}
	.info-msg{
		width:648/1366*100%;
		//min-height:768px;
		padding-top:90px;
		padding-left:90px;
		.info-header{
			.fleet-name{
				font-size:24px;
				line-height:1;
				padding-left:0.5em;
				font-weight:normal;
				border-left:4px solid @red;
			}
			.route-name{
				font-size:40px;
				line-height:1.25;
				font-weight:normal;
				margin-bottom:0.5em;
			}
			.route-msg{
				font-size:16px;
				line-height:1.8;
				padding-bottom:20px;
				border-bottom:1px solid #ebebeb;
				span{
					padding-right:1em;
				}
			}
			.msg-fleet-name{
				background-color:@red;
				color:#fff;
				font-style:normal;
				padding:0 0.8em;
				display:inline-block;
				.border-radius(1em);
				&::after{
					content:'\f0da';
					padding-left:0.5em;
					font-family:'FontAwesome';
				}
				&:hover{
					text-decoration:none;
				}
			}
		}
		.info-body{
			padding-top:20px;
			padding-bottom:20px;
			.detail{
				font-size:16px;
				line-height:1.625;
				margin-bottom:1em;
			}
			.highlights-title{
				font-size:18px;
				color:#000;
				margin-bottom:0.5em;
			}
			.route-highlights{
				font-size:16px;
				color:#585858;
				li{
					margin-bottom:0.5em;
					&::before{
						color:@red;
						content:'\f0da';
						padding-right:0.5em;
						font-family:'FontAwesome';
					}
				}
			}
		}
		.info-footer{
			.booking-link{
				padding:0.8em 3em;
				border:3px solid @red;
				color:@red;
				font-size:18px;
				display:inline-block;
				.border-radius(2em);
				&:hover{
					text-decoration:none;
					background-color:@red;
					color:#fff;
				}
			}
		}
	}
	@media screen and (max-width:1466px){
		padding-left:50px;
		padding-right:50px;
		padding-bottom:70px;
		.info-msg{
			padding-top:70px;
			padding-left:70px;
			.info-header{
				.fleet-name{font-size:22px;border-left:3px solid @red;}
				.route-name{font-size:38px;}
				.route-msg{font-size:14px;}
			}
			.info-body{
				.detail{font-size:14px;}
				.highlights-title{font-size:16px;}
				.route-highlights{font-size:14px;}
			}
			.info-footer{
				.booking-link{padding:0.5em 2.5em;  font-size:16px; border-width:2px;}
			}
		}
	}
	@media screen and (max-width:1270px){
		.info-msg{
			padding-top:50px;
			padding-left:50px;
			.info-header{
				.fleet-name{font-size:18px;}
				.route-name{font-size:36px; margin-bottom:0.3em;}
			}
			.info-footer{
				.booking-link{border-width:2px;}
			}
		}
	}
	@media screen and (max-width:1024px){
		padding-bottom:0;
		.route-map{
			width:100%;
			float:none;
		}
		.info-msg{
			padding:50px;
			width:100%;
			float: none;
			.info-header{
				.fleet-name{font-size:16px;}
				.route-name{font-size:32px;}
			}
			.info-footer{
				.booking-link{padding:0.5em 2em;  font-size:14px;}
			}
		}
	}
	@media screen and (max-width:768px){
		padding-left:50*@rpx;
		padding-right:50*@rpx;
		padding-bottom:0;
		.route-map{
			width:auto;
			margin-left:-50*@rpx;
			margin-right:-50*@rpx;
		}
		.info-msg{
			padding:50*@rpx;
			padding-left:0;
			padding-right:0;
			width:100%;
			float: none;
			.info-header{
				.fleet-name{font-size:16px;}
				.route-name{font-size:28px;}
			}
		}
	}
}

//路线详情
.route-detail{
	background-color: #efefef;
	padding-top:50px;
	padding-bottom:100px;
	.switch-nav{
		margin-bottom:50px;
		.nav-item{
			width:100/4%;
			padding:1.5em 1em;
			span{font-size:18px; padding-top:0.3em; display:block; .text-overflow;}
		}
	}
	.content-item{
		h3{
			font-size:32px;
			color:#000;
			font-weight:normal;
			text-align:center;
			line-height:1.2;
			&::after{
				content:'';
				display:block;
				width:2em;
				height:1px;
				margin:0.8em auto;
				background-color: #e0e0e0;
			}
		}
		h4{
			font-size:18px;
			line-height:1.5;
			color:#000;
			margin-bottom:0.5em;
		}
		p{
			margin-bottom:1em;
			font-size:16px;
			line-height:2;
			color:#666;
		}
		&.trip{
			.trip-item{
				position:relative;
				padding:50px 80px;
				background-color:#fff;
				margin-bottom:80px;
				.day-tip{
					@size:3em;
					position:absolute;
					top:20px;
					left:0;
					padding:0 1.7em;
					color:#fff;
					font-size:20px;
					line-height:@size;
					background-color:rgba(0, 0, 0, 0.4);
					&::before,&::after{
						content:'';
						display:block;
						width:0;
						height:0;
						border:@size/2 solid transparent;
						border-top-width:0;
						border-right-width:0;
						border-left-color:rgba(0, 0, 0, 0.4);
						position:absolute;
						top:0;
						right:-@size/2;
					}
					&::after{
						border-top-width:@size/2;
						border-bottom-width:0;
						top:initial;
						bottom:0;
					}
				}
				&.trip-item-img{
					padding:0;
					background-color:transparent;
					.text-area{
						width:970/1170*100%;
						margin-left:auto;
						margin-right:auto;
						position:relative;
						z-index:9;
						margin-top:-140px;
						padding:50px 80px;
						background-color:#fff;
					}
				}
			}
		}
	}
	@media screen and (max-width:1270px){
		.switch-nav{
			.nav-item{
				padding:1.3em 0.8em;
				i{font-size:48px;}
				span{font-size:16px;}
			}
		}
		.content-item{
			h3{font-size:28px;}
			p{}
			&.trip{
				.trip-item{
					padding:40px 60px;
					margin-bottom:60px;
					.day-tip{
						@size:3em;
						font-size:16px;
						line-height:@size;
						&::before,&::after{
							border:@size/2 solid transparent;
							border-top-width:0;
							border-right-width:0;
							border-left-color:rgba(0, 0, 0, 0.4);
							right:-@size/2;
						}
						&::after{
							border-top-width:@size/2;
							border-bottom-width:0;
						}
					}
					&.trip-item-img{
						.text-area{
							margin-top:-120px;
							padding:40px 60px;
						}
					}
				}
			}
		}
	}
	@media screen and (max-width:1024px){
		.switch-nav{
			.nav-item{
				padding:1.2em 0.5em;
				i{font-size:40px;}
				span{font-size:12px;}
			}
		}
		.content-item{
			h3{font-size:24px;}
			p{font-size:14px;}
			h4{font-size:16px;}
			&.trip{
				.trip-item{
					padding:40px 60px;
					margin-bottom:60px;
					.day-tip{
						@size:3em;
						font-size:14px;
						line-height:@size;
						&::before,&::after{
							border:@size/2 solid transparent;
							border-top-width:0;
							border-right-width:0;
							border-left-color:rgba(0, 0, 0, 0.4);
							right:-@size/2;
						}
						&::after{
							border-top-width:@size/2;
							border-bottom-width:0;
						}
					}
					&.trip-item-img{
						.text-area{
							margin-top:-100px;
							padding:40px 60px;
						}
					}
				}
			}
		}
	}
	@media screen and (max-width:768px){
		padding-top:50*@rpx;
		padding-bottom:100*@rpx;
		.switch-nav{
			margin-bottom:50*@rpx;
			margin-left:-30*@rpx;
			margin-right:-30*@rpx;
			.nav-item{
				padding:1.2em 0.5em;
				i{font-size:30px;}
				span{font-size:14px;}
			}
		}
		.content-item{
			h3{
				font-size:22px;
				&::after{margin:0.5em auto;}
			}
			&.trip{
				.trip-item{
					padding:40*@rpx 60*@rpx;
					margin-bottom:60*@rpx;
					padding-top:160*@rpx;
					.day-tip{
						@size:3em;
						font-size:14px;
						line-height:@size;
						&::before,&::after{
							border:@size/2 solid transparent;
							border-top-width:0;
							border-right-width:0;
							border-left-color:rgba(0, 0, 0, 0.4);
							right:-@size/2;
						}
						&::after{
							border-top-width:@size/2;
							border-bottom-width:0;
						}
					}
					&.trip-item-img{
						.text-area{
							margin-top:-140*@rpx;
							padding:40*@rpx 60*@rpx;
						}
					}
				}
			}
		}
	}
}
